<template>
    <div style="margin-left:20px;">
        <el-row>
            <el-col :span="24">
                <el-container  style="background-color: #FCFCFC;">
                    <el-form ref="form" :model="form" label-width="100px" style="width:100%">
                        <el-row>
                            <el-col :span = "6">
                                <el-form-item label="商机名称" prop="businessName">
                                    <span style="color:#333333;">{{form.businessName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span = "6">
                                <el-form-item label="客户名称" prop="customerName">
                                    {{ this.form.customerName }}
                                </el-form-item>
                            </el-col>
                            <el-col :span = "6">
                                <el-form-item label="商机级别" prop="busLevel">
                                    <span style="color:#333333;">
                                        {{this.selectDictLabel(this.customerLevelOptions, form.busLevel)}}
                                    </span>
                                </el-form-item>
                            </el-col>
                            <el-col :span = "6">
                                <el-form-item label="当前阶段" prop="statusId">
                                    {{ this.form.statusName }}
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span = "4">
                                <el-form-item label="首要联系人" prop="firstContacts">
                                    <span style="color:#333333;">{{form.firstContacts}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span = "4">
                                <el-form-item label="电话" prop="firstTel">
                                    <span style="color:#333333;">{{form.firstTel}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span = "4">
                                <el-form-item label="负责人" prop="businessLeaderName">
                                    <span style="color:#333333;">{{form.businessLeaderName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span = "5">
                                <el-form-item label="创建时间" prop="createTime">
                                    {{ parseTime(form.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
                                </el-form-item>
                            </el-col>
                            <el-col :span = "3">
                                <el-form-item label="商机金额(元)" prop="money">
                                    {{ form.money }}
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="附件" prop="annex" v-if="form.annex != null">
                            <el-link :href="form.annex" style="color:#1890ff" target="_blank">{{form.annex}}</el-link>
                        </el-form-item>
                    </el-form>
                </el-container>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="18">
                <el-steps :active="active" finish-status="success">
                    <el-step v-for="(sta, index) in statusIds" :key="index" :title="sta.name" @click.native="changeBusStage(sta)" style="cursor:pointer;"></el-step>
                </el-steps>
                <el-tabs style="height: 200px;">
                    <el-tab-pane label="活动">
                        <el-button
                            type="primary"
                            plain
                            icon="el-icon-plus"
                            size="mini"
                            @click="handleAddActivity"
                            v-hasPermi="['crm:activity:add']"
                            >
                            新增跟进
                        </el-button>
                        <el-button
                            type="primary"
                            plain
                            icon="el-icon-plus"
                            size="mini"
                            @click="handleAddActivityTask"
                            v-hasPermi="['crm:activity:add']"
                            >
                            新增任务
                        </el-button>
                        <el-scrollbar :style="this.sjzStyle">
                            <div class="block" style="margin-top:20px;">
                                <el-timeline style="margin-left:-30px;">
                                    <el-timeline-item placement="top"
                                        v-for="(activity, index) in activityList"
                                        :timestamp="activity.updateTime"
                                        :key="index"
                                        >
                                        <el-card>
                                            <div v-if="activity.type === 1">
                                                <h4>{{activity.createByName}} {{activity.category}} 拜访</h4>
                                                <span style="float:right;margin-top:-60px;">
                                                    <el-tag v-if="activity.type == 1">跟进</el-tag>
                                                </span>
                                                <p v-html="activity.content"></p>
                                                <el-row>
                                                    <span style="float:left;">
                                                        <fileUploadDetail v-model="activity.annex"/>
                                                    </span>
                                                </el-row>
                                                <el-row>
                                                    <span style="float:left;">下次拜访时间：{{ parseTime(activity.nextTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                                                </el-row>
                                                <span style="float:right;width:65px;margin-bottom:5px;cursor:pointer;">
                                                    <el-tag v-if="activity.status == 0" type="warning" @click="activityEdit(activity)">编辑</el-tag>
                                                </span>
                                                <span style="float:right;width:65px;margin-bottom:5px;">
                                                    <el-tag v-if="activity.status == 1" type="success">已拜访</el-tag>
                                                    <el-tag v-if="activity.status == 0" type="danger">未拜访</el-tag>
                                                </span>
                                            </div>
                                            <div v-if="activity.type === 2">
                                                <h4>负责人：{{activity.activityLeaderName}}</h4>
                                                <span style="float:right;margin-top:-60px;">
                                                    <el-tag v-if="activity.type == 2">任务</el-tag>
                                                </span>
                                                <p v-html="activity.content"></p>
                                                <el-row>
                                                    <span style="float:left;">
                                                        <fileUploadDetail v-model="activity.annex"/>
                                                    </span>
                                                </el-row>
                                                <span style="float:right;width:65px;margin-bottom:5px;cursor:pointer;">
                                                    <el-tag v-if="activity.status == 0" type="warning" @click="activityEdit(activity)">编辑</el-tag>
                                                </span>
                                                <span style="float:right;width:65px;margin-bottom:5px;">
                                                    <el-tag v-if="activity.status == 1" type="success">已完成</el-tag>
                                                    <el-tag v-if="activity.status == 0" type="danger">未完成</el-tag>
                                                </span>
                                            </div>
                                        </el-card>
                                    </el-timeline-item>
                                </el-timeline>
                            </div>
                        </el-scrollbar>
                    </el-tab-pane>
                    <el-tab-pane label="详细信息">
                        <el-collapse v-model="activeNames">
                            <el-collapse-item title="基本信息" name="1">
                                <el-form ref="form" :model="form" label-width="100px">
                                    <el-row>
                                        <el-col :span = "8">
                                            <el-form-item label="商机名称" prop="businessName">
                                                <span>{{form.businessName}}</span>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span = "8">
                                            <el-form-item label="商机来源" prop="busSource">
                                                <span>{{form.busSource}}</span>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span = "8">
                                            <el-form-item label="商机金额(元)" prop="money">
                                                <span>{{form.money}}</span>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-form-item label="描述" prop="busMsg">
                                        <span>{{form.busMsg}}</span>
                                    </el-form-item>
                                    <el-row>
                                        <el-col :span = "8">
                                            <el-form-item label="首要联系人" prop="firstContacts">
                                                <span>{{form.firstContacts}}</span>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span = "8">
                                            <el-form-item label="电话" prop="firstTel">
                                                <span>{{form.firstTel}}</span>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span = "8">
                                            <el-form-item label="预计成交日期" prop="dealDate">
                                                <span>{{ parseTime(form.dealDate, '{y}-{m}-{d}') }}</span>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span = "8">
                                            <el-form-item label="商机级别" prop="busLevel">
                                                {{this.selectDictLabel(this.customerLevelOptions, form.busLevel)}}
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span = "8">
                                            <el-form-item label="下次联系时间" prop="nextTime">
                                                <span>{{ parseTime(form.nextTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span = "8">
                                            <el-form-item label="商机状态" prop="isEnd">
                                                <span>{{this.selectDictLabel(this.isEndOptions, form.isEnd)}}</span>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form>
                            </el-collapse-item>
                            <el-collapse-item title="系统信息" name="2">
                                <el-form ref="form" :model="form" label-width="100px">
                                    <el-row>
                                        <el-col :span = "8">
                                            <el-form-item label="负责人" prop="businessLeaderName">
                                                <span>{{form.businessLeaderName}}</span>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span = "8">
                                            <el-form-item label="创建人" prop="createByName">
                                                <span>{{form.createByName}}</span>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span = "8">
                                            <el-form-item label="创建时间" prop="createTime">
                                                <span>{{ parseTime(form.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span = "8">
                                            <el-form-item label="更新人" prop="updateByName">
                                                <span>{{form.updateByName}}</span>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span = "8">
                                            <el-form-item label="更新时间" prop="updateTime">
                                                <span>{{ parseTime(form.updateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span = "8">
                                            <el-form-item label="最后跟进时间" prop="lastTime">
                                                <span>{{ parseTime(form.lastTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-form-item label="最后跟进记录" prop="lastCon">
                                        <span v-html="form.lastCon"></span>
                                    </el-form-item>
                                </el-form>
                            </el-collapse-item>
                        </el-collapse>
                    </el-tab-pane>
                    <el-tab-pane label="团队成员">
                        <team :businessId = "this.form.id" :teamType = 2></team>
                    </el-tab-pane>
                    <el-tab-pane label="联系人">
                        <contacts :busId = "this.form.id" :type = 3></contacts>
                    </el-tab-pane>
                    <el-tab-pane label="产品">
                        <busProduct :businessId = "this.form.id" :type = 1 @getBusinessInfo="getBusinessInfo"></busProduct>
                    </el-tab-pane>
                    <el-tab-pane label="合同">
                        <busContract :busForm = "this.form"></busContract>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
            <el-col :span="6">
                <el-tabs style="height: 200px;margin-left:30px;">
                    <el-tab-pane label="重要信息">
                        <el-form ref="form" :model="form" label-width="100px">
                            <el-form-item label="商机名称" prop="businessName">
                                <span>{{form.businessName}}</span>
                            </el-form-item>
                            <el-form-item label="客户名称" prop="customerName">
                                <span>{{form.customerName}}</span>
                            </el-form-item>
                            <el-form-item label="首要联系人" prop="firstContacts">
                                <span style="color:#333333;">{{form.firstContacts}}</span>
                            </el-form-item>
                            <el-form-item label="电话" prop="firstTel">
                                <span>{{form.firstTel}}</span>
                            </el-form-item>
                            <el-form-item label="预计成交日期" prop="website">
                                <span>{{ parseTime(form.dealDate, '{y}-{m}-{d}') }}</span>
                            </el-form-item>
                            <el-form-item label="商机金额(元)" prop="money">
                                {{ form.money }}
                            </el-form-item>
                            <el-form-item label="折扣" prop="discountRate">
                                {{ form.discountRate }}%
                            </el-form-item>
                            <el-form-item label="负责人" prop="businessLeaderName">
                                <span>{{form.businessLeaderName}}</span>
                            </el-form-item>
                            <el-form-item label="下次联系时间" prop="nextTime">
                                <span>{{ parseTime(form.nextTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                            </el-form-item>
                            <el-form-item label="最后跟进时间" prop="lastTime">
                                <span>{{ parseTime(form.lastTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>

        <!-- 添加或修改crm活动表对话框 -->
        <el-dialog :title="activityTitle" :visible.sync="open" width="50%" append-to-body>
            <activityForm 
                :businessId = "this.businessId" 
                :activityType = "this.activityType"
                :type = "this.type"
                :isNewTime = "this.isNewTime"
                :activityFormEdit = "this.activityFormEdit"
                :isNewTimeUpdate = "this.isNewTimeUpdate"
                @activityFormClose="activityFormClose" 
                @getListActivity = "getListActivity"></activityForm>
        </el-dialog>
    </div>
</template>




<script>
import { listBusiness, getBusiness, delBusiness, addBusiness, updateBusiness, exportBusiness, updateBusinessStage } from "@/api/crm/business/business";
import { listActivity, getActivity, delActivity, addActivity, updateActivity, exportActivity } from "@/api/crm/activity/activity";
import FileUpload from '@/components/FileUpload';
import FileUploadDetail from '@/components/FileUploadDetail';
import team from '../team/index';
import { getAllListType, getType } from "@/api/crm/busstage/type";
import contacts from '../contacts/index';
import busProduct from '../busProduct/busProduct';
import busContract from '../contract/bus_contract';

import activityForm from '../activity/activityForm'

export default {
    props: {
        busId: {}
    },
    name: "Clue",
    components: {
        activityForm,
        FileUpload,
        FileUploadDetail,
        team,
        contacts,
        busProduct,
        busContract
    },
    data() {
        return {
            //时间轴高度
            sjzStyle: "height:" + document.documentElement.clientHeight / 1.5 + "px", //实时屏幕高度
            //时间轴排序
            reverse: true,
            activeNames: ['1','2'],
            // 活动表表格数据
            activityList: [],
            activityTitle: "新增跟进",
            // 是否显示弹出层
            open: false,
            // 活动表表单参数
            activityForm: {},
            //当前步骤
            active: 0,
            // 活动表表单参数-用于编辑
            activityFormEdit: {},
            // 活动表表单参数-业务id
            businessId: "",
            //判断是否新增按钮，随机生成时间戳，进行判断
            isNewTime: new Date(),
            //判断是否跟进编辑按钮，随机生成时间戳，进行判断
            isNewTimeUpdate: new Date(),
            // 活动表表单参数-活动类型 线索、客户、商机
            activityType: "",
            //活动类型 1 跟进 2 任务
            type: 1,
            //商机阶段分类
            typeIds: [],
            // 商机状态字典
            isEndOptions: [],
            //商机阶段
            statusIds: [],
            form: {},
            customerLevelOptions: [],
            // 表单校验
            rules: {
                
            }
        };
    },
    created() {
        this.getDicts("clue_level").then(response => {
            this.customerLevelOptions = response.data;
        });
        this.getDicts("business_type").then(response => {
            this.isEndOptions = response.data;
        });
    },
    methods: {
        /** 改变商机状态 */
        changeBusStage(sta){
            if(this.form.statusId === sta.id){
                this.msgError("当前正在 " + sta.name + " 阶段，无需更改");
            }else{
                let _this = this;
                this.$confirm('是否确认修改商机阶段为：' + sta.name + ' 阶段?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function() {
                    let cusStageForm = {id: _this.busId, statusId: sta.id};
                    updateBusinessStage(cusStageForm).then(response => {
                        _this.msgSuccess("修改商机阶段成功");
                        _this.form = response.data;
                        for(var i = 0; i < _this.statusIds.length; i++){
                            if(_this.form.statusId == _this.statusIds[i].id){
                                _this.active = i + 1;
                            }
                        }
                    })
                })
            }
        },
        /** 新增跟进按钮操作 */
        handleAddActivity() {
            this.isNewTime = new Date() + Math.round(Math.random()*50000);
            this.businessId = this.form.id;
            this.activityType = "3";
            this.type = 1;
            this.open = true;
            this.activityTitle = "新增跟进";
        },
        /** 新增任务按钮操作 */
        handleAddActivityTask() {
            this.isNewTime = new Date() + Math.round(Math.random()*50000);
            this.businessId = this.form.id;
            this.activityType = "3";
            this.type = 2;
            this.open = true;
            this.activityTitle = "新增任务";
        },
        /** 关闭跟进框 */
        activityFormClose() {
            this.open = false;
        },
        /** 查询跟进列表-时间轴 */
        getListActivity(){
            var queryParam = {busId: this.businessId, type: 3};
            listActivity(queryParam).then(response => {
                this.activityList = response.rows;
            });
        },
        /** 编辑跟进记录 */
        activityEdit(row){
            this.type = 1;
            this.isNewTimeUpdate = new Date() + Math.round(Math.random()*50000);
            this.activityFormEdit = row;
            this.open = true;
        },
        /** 获取商机详情 */
        getBusinessInfo(){
            getBusiness(this.busId).then(response => {
                this.form = response.data;
            });
        }
    },
    watch: {
        busId: {
        　　handler(newValue, oldValue) {
        　　    if(null != newValue){
                    getBusiness(newValue).then(response => {
                        this.form = response.data;
                        getType(this.form.typeId).then(response => {
                            this.statusIds = response.data.crmBusinessStatusList;
                            for(var i = 0; i < this.statusIds.length; i++){
                                if(this.form.statusId == this.statusIds[i].id){
                                    this.active = i + 1;
                                }
                            }
                        });
                    });
                    var queryParam = {businessId: newValue, activityType: 3};
                    listActivity(queryParam).then(response => {
                        this.activityList = response.rows;
                    });
                }
        　　},
            deep: true,
        　　immediate: true
        }
    } 
};
</script>